<template>
  <div>
    <qa-table-query :columns="queryForm.columns" v-model="queryForm.formData" @search="search"></qa-table-query>
    <el-row>
      <el-button type="success" icon="circle-plus" @click="addBtn">添加</el-button>
      <!-- 批量操作 -->
    </el-row>

    <qa-table ref="tableRef" :width="800" :action="table.action" :columns="table.columns" :query-form-param="queryForm" border
    :header-cell-style="{ background: '#EEF1F6', color: '#606266'}"
       :right-btns="['detail_auto', 'update', 'delete', 'more']" :right-btns-more="table.rightBtnsMore"
      :selection="true" :row-no="true" :pagination="true" size="default" @update="updateBtn"
      @delete="deleteBtn"></qa-table>
    <qa-dialog :title="form.props.title" v-model="form.props.show" v-slot="slotProps">
      <qa-form v-model="form.data" :rules="form.props.rules" :columns="form.props.columns" ref="bComponent"
        :closeDialog="slotProps.closeDialog" :labelWidth="100" :action="form.props.action"
        :formType="form.props.formType" @success="form.props.show = false; tableRef?.refresh()"></qa-form>
    </qa-dialog>
  </div>
</template>

<script setup lang="ts">
import qaTable from '@/components/qa-table.vue'
import qaTableQuery from '@/components/qa-table-query.vue'
import qaDialog from '@/components/qa-dialog.vue';
import qaForm from '@/components/qa-form.vue';

const originalForms: any = {}; // 表单初始化数据

const tableRef = ref<InstanceType<typeof qaTable> | null>(null);
const bComponent = ref(null)
const table = ref({
  action: '/admin/system/sysUser/systemUser/getList',
  rightBtnsMore: [
    {
      title: '数据看板I',
      disabled: true,
      onClick: (item: any) => {
      },
    },
    {
      title: '数据看板II',
      disabled: false,
      onClick: (item: any) => {
      },
    },
    {
      title: '数据看板III',
      disabled: (item: any) => {
        return item.no !== 2
      },
      onClick: (item: any) => {
        console.log(item)
      }
    },
  ],
  columns: [
    { key: "json", title: "json字段", type: "json", width: 300, maxHeight: 300 },
    {
      key: "gender", title: "性别", type: "radio", width: 120, defaultValue: 0,
      data: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
        { value: 0, label: "保密" },
      ]
    },
    {
      key: "table",
      type: "table",
      title: "table",
      width: 300,
      columns: [
        { key: "name", title: "姓名", type: "text", width: 120 },
        { key: "age", title: "年龄", type: "text", width: 120 },
        {
          key: "img",
          type: "image",
          title: "图片",
        }
      ]
    },
    {
      key: "object",
      type: "object",
      title: "object",
      width: 300
    },
    // {
    //   key: "_id",
    //   title: "唯一ID",
    //   type: "html",
    //   width: 220,
    //   align: "left",
    //   formatter: (val: any, row: any, column: any, index: any) => {
    //     let str = `<text>${val}</text>`;
    //     return str;
    //   }
    // },

    // {
    //   key: "avatar",
    //   title: "头像",
    //   type: "avatar",
    //   imageWidth: 40,
    //   minWidth: 220,
    //   align: "left",
    // },
    {
      key: "no",
      title: "序号",
      type: "text",
      align: "left",
      sortable: "custom",
    },
    {
      key: "username",
      title: "账号",
      type: "text",
      width: 120,
      align: "left",
    },
    {
      key: "_add_time",
      title: "注册时间",
      type: "time",
      width: 250,
      valueFormat: "yyyy年M月dd hh:mm:ss",
      align: "center",
      sortable: "custom",
    },

    // {
    //   key: "image",
    //   title: "图片",
    //   type: "image",
    //   imageWidth: 50,
    // },
    // {
    //   key: "rate",
    //   title: "评分",
    //   type: "rate",
    //   imageWidth: 50,
    //   width: 150,
    // },
    {
      key: "status",
      title: "启用",
      type: "switch",
      activeValue:true, inactiveValue:false
    },
    {
      key: "icon",
      title: "图标",
      type: "icon",
      imageWidth: 20,
    },
    {
      key: "no",
      title: "图标II",
      type: "icon",
      imageWidth: 20,
      data: [
        {
          value: 1,
          icon: 'ChatDotRound'
        },
        {
          value: 2,
          icon: 'ChatRound'
        }
      ]
    },
    {
      defaultValue: 2,
      key: "tag",
      title: "标签",
      type: "tag",
      data: [
        { value: 1, label: "收入", tagType: "success" },
        { value: 2, label: "支出", tagType: "danger" }
      ]
    },
    {
      key: "_add_time", title: "距离现在", type: "dateDiff", width: 120
    },
    {
      key: "_add_time", title: "到期剩", type: "dateDiff2", width: 120, endText: "会员过期啦~"
    },
    {
      defaultValue: "王护士",
      width: 160,
      key: "nickname", title: "html渲染", type: "html",
      formatter: (val: any, row: any, column: any, index: number) => {
        let str = `<text>${val}</text>（审核通过）`;
        return str;
      }
    },
    { key: "money", title: "余额", type: "money", width: 120 },
    {
      key: "", title: "分组显示", type: "group", width: 250, align: "left",
      columns: [
        { key: "_id", title: "ID", type: "text" },
        { key: "avatar", title: "头像", type: "avatar" },
        { key: "username", title: "账号", type: "text" },
      ],
    },
    {
      key: "percentage",
      type: "percentage",
      title: "百分比",
    }
  ]
})


const queryForm = ref({
  formData: {
  },
  columns: [
    { "key": "_id", "title": "用户ID", "type": "text", "width": 200, "mode": "=",},
    { "key": "username", "title": "账号", "type": "text", "width": 200, "mode": "%%" },
    { "key": "_add_time", "title": "注册时间", "type": "datetimerange", "width": 400, "mode": "[]" },
    {
      "key": "no", "title": "序号", "type": "select", "width": 200,
      "mode": "=",
      data: [
        {
          value: 1,
          label: 1
        },
        {
          value: 2,
          label: 2
        }
      ],
    }
  ]
})


const form = ref({
  data: {
    username: 1249412130,
    percentage: 0.5,
    higher_up_username:[]
  },
  props: {
    title: "",
    action: "",
    columns: [
      {
        "key": "_id",
        "title": "用户ID",
        "type": "text",
        "disabled": true
      },
      {
        "key": "username",
        "title": "账号",
        "type": "text"
      },
      { key: "_add_time", title: "注册时间", type: "date", dateType: "date" },
      { key: "no", title: "序号", type: "number" },
      {
        key: "gender", title: "性别", type: "select", data: [
          { value: 1, label: "男" },
          { value: 2, label: "女" }
        ]
      },
      {
        key: "status", title: "状态", type: "radio", data: [
          { value: true, label: "启用" },
          { value: false, label: "禁用" }
        ]
      },
      {
        key: "role", title: "角色", type: "checkbox", data: [
          { value: 'admin', label: "管理员" },
          { value: 'agent', label: "二级管理员" }
        ]
      },
      {
        key: "status", title: "状态", type: "switch", data: [
          { value: true, label: "启用" },
          { value: false, label: "禁用" }
        ]
      },
      {
        key: "percentage",
        title: "百分比",
        type: "percentage",
      },
      {
        key: "discount",
        title: "折扣",
        type: "discount",
      },
      {
        key: "higher_up_id",
        type: "table-select",
        multiple: false,
        action: "/admin/system/sysUser/systemUser/getList",
        placeholder: "选择上级",
        title: "上级",
        columns: [
          {
            key: "_id",
            title: "ID",
            type: "text",
            width: 220,
            idKey: true,
          },
          {
            key: "avatar",
            title: "头像",
            type: "image",
          },
          {
            key: "username",
            title: "账户",
            type: "text",
            nameKey: true
          },
        ],
        queryColumns: [
          {
            key: "_id",
            title: "ID",
            type: "text",
            width: 220,
            mode: "="
          },
          {
            key: "username",
            title: "账户",
            type: "text",
            mode: "="
          },
          {
            key: "no",
            title: "序号",
            type: "select",
            width: 120,
            mode: "=",
            data: [
              { value: 1, label: "1" },
              { value: 2, label: "2" },
            ]
          },
        ],
        watch: (val:any, formData:any, column:any, index:number, option:any) => {
          console.log('val',val)
          console.log('formData',formData)
          console.log('column',column)
          console.log('index',index)
          console.log('option',option)
          // form.value.data.higher_up_username = option.map((item:any) => { return item.username })

          form.value.data.higher_up_username = option.username
        }
      },

    ],
    rules: {
      username: [{
        min: 5, max: 15,
        required: true,
        message: '长度在5到15个字符',
        trigger: 'blur'
      }]
    },
    formType: 'add' as 'add' | 'update',
    show: false
  }
})

originalForms['data'] = JSON.parse(JSON.stringify(form.value.data));


const addBtn = () => {
  form.value.data = { ...originalForms['data'] }
  form.value.props.action = '/admin/system/sysUser/systemUser/add';
  form.value.props.formType = "add"
  form.value.props.title = '添加';
  form.value.props.show = true
}

const deleteBtn = (row: any, deleteFn: (params: { action: string, data: any }) => Promise<void>) => {
  deleteFn({
    action: '/admin/system/sysUser/systemUser/delete',
    data: {
      _id: row._id
    }
  })
}
const updateBtn = (row: any) => {
  form.value.data = row
  form.value.props.action = '/admin/system/sysUser/systemUser/update';
  form.value.props.formType = "update"
  form.value.props.title = '编辑';
  form.value.props.show = true
}

const search = () => {
  console.log('我是emit')
  if (tableRef.value) {
    (tableRef.value as { Search: () => void }).Search();
  }
}
</script>

<style scoped></style>
